<template>
    <!-- 查看自己以前学习计划页面-点击进入学习计划内容页-内容页只能查看不能编辑 -->
    <div id="MeBeforeProcess">
        <div id="beforeContent">
            <div class="beforeVessels" v-for="item in pages.content" :key="item.id" @click="jump(item.id)">
                <div>{{item.title}}</div>
                <p>
                    {{item.content}}
                </p>
                <ul>
                    <li>编辑者：{{item.user}}</li>
                    <li>{{item.time}}</li>
                </ul>
            </div>
        </div>
        <div id="pages">
            <el-pagination
                class="pages"
                background
                layout="prev, pager, next"
                :total="pages.total"
                :hide-on-single-page=true
                :current-page="pages.current"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    name:'MeBeforeProcess',
    data(){
        return {
            //分页
            pages:{
                //每页十条，共几条
                total:100,
                //当前页数
                vals:1,
                //自定义第几页
                current:1,
                //分页内容
                content:[
                    {
                        title:'大一寒假第一次学习计划1',
                        id:1,
                        user:"是个人1",
                        content:"一月前项目任务是做一个图片网站，参考堆糖。在做项目的时候遇到了很多的问题，总结一下，以后写项目要注意一下。token配置  token最好在项目最开始配置好，不然到最后一起配置可能会浪费好多时间，还可能会出错。  关于不同方式配置请求头的问题。axios({ method:'put', url:'', //headers",
                        time:'2022-1-23',
                    },
                    {
                        title:'大一寒假第一次学习计划2',
                        id:2,
                        user:"是个人2",
                        content:"一月前项目任务是做一个图片网站，参考堆糖。在做项目的时候遇到了很多的问题，总结一下，以后写项目要注意一下。token配置  token最好在项目最开始配置好，不然到最后一起配置可能会浪费好多时间，还可能会出错。  关于不同方式配置请求头的问题。axios({ method:'put', url:'', //headers",
                        time:'2022-1-23',
                    },
                    {
                        title:'大一寒假第一次学习计划3',
                        id:3,
                        user:"是个人3",
                        content:"一月前项目任务是做一个图片网站，参考堆糖。在做项目的时候遇到了很多的问题，总结一下，以后写项目要注意一下。token配置  token最好在项目最开始配置好，不然到最后一起配置可能会浪费好多时间，还可能会出错。  关于不同方式配置请求头的问题。axios({ method:'put', url:'', //headers",
                        time:'2022-1-23',
                    },
                    {
                        title:'大一寒假第一次学习计划4',
                        id:4,
                        user:"是个人4",
                        content:"一月前项目任务是做一个图片网站，参考堆糖。在做项目的时候遇到了很多的问题，总结一下，以后写项目要注意一下。token配置  token最好在项目最开始配置好，不然到最后一起配置可能会浪费好多时间，还可能会出错。  关于不同方式配置请求头的问题。axios({ method:'put', url:'', //headers",
                        time:'2022-1-23',
                    },
                ],
            }
        }
    },
    methods:{
        handleCurrentChange(val) {
            //当前页数
            this.pages.vals=val
        },
        //跳转到查看自己以前学习计划具体内容页面
        jump(id){
            let news=this.$router.resolve({path:`/LeftSider/ProcessContent/${id}`})
            window.open(news.href, '_blank');
        }
    },
}
</script>

<style lang="less" scoped>
    #beforeContent{
        width: 100%;
        .beforeVessels{
            width: 100%;
            height: 150px;
            padding: 10px;
            margin-bottom:20px;
            border-bottom: 1px solid #d1d1d4;
            cursor: pointer;
            div{
                width: 100%;
                height: 30px;
                line-height: 30px;
                font-weight: 600;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
            }
            p{
                width: 100%;
                height: 52px;
                margin-top: 8px;
                text-indent: 2em;
                font-size: 14px;
                line-height: 24px;
                color: #555666;
                overflow: hidden;
                white-space: normal;
                word-break: break-word;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            ul{
                list-style: none;
                width: 100%;
                height: 30px;
                margin-top: 10px;
                color:#555666;
                font-size: 14px;
                display: flex;
                justify-content:space-between;
            }
        }
    }
    #pages{
        width: 100%;
        height: 40px;
        margin: 20px 0;
        .pages{
            display: flex;
            justify-content:center;
        }
    }
</style>